<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="title" >
        <!-- Button trigger modal -->
        <button type="button" class="btnt btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
            新增学生
        </button>

        <button type="button" class="btnt btn btn-primary btn-lg" data-toggle="modal" data-target="#sModal" onclick="">
            查询学生
        </button>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>#</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>成绩</th>
                <th style="width:100px;">操作</th>
            </tr>
            </thead>
            <tbody id="studentTb">
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <div class="form-group">
                        <input hidden="hidden" id="id" name="id">
                    </div>
                    <div class="form-group">
                        <label for="no">学号</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="编号">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别:</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                    </div>
                </form>
                <!-表单结束->
            </div>
            <div class="modal-footer" id="buttonstudent">
                <button type="button" class="btn btn-success" onclick="saveStudent();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="sModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">按名字查询</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control" id="sname" name="sname" placeholder="请输入要查询的学生的姓名">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="findName();">查找</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
    /*
    function findName(){
        var data={
            name:$("#sname").val()
        };
        $.ajax({
            method: "get",
            url: "/webapi/student/findname",
            data: data,
            dataTypes: Array("text", "json"),
            success: function (rs) {
                if (rs != "") {
                    $('#sModal').modal('hide');
                    $('#myModal').modal('show');
                    $("#id").val(rs[0].id);
                    $("#no").val(rs[0].no);
                    $("#name").val(rs[0].name);
                    $("#password").val("");
                    $("#sex").val(rs[0].sex);
                    $("#age").val(rs[0].age);
                    $("#score").val(rs[0].score);
                    var html="";
                    $("#buttonstudent").html(html);
                }
                else{
                    alert("名字不存在或输入错误");
                }
            }
        })
    }
    */

    //新增或更新
    function saveStudent(){

        var data=$("#formStudent").serialize();

        var id=$('#id').val();

        if (id <1){
            //是新增
            $.ajax({
                url:"/webapi/student/insert",
                method:"post",

                data:data
            }).done(function(){

                loadTable();
                $('#myModal').modal('hide')

            })
        }
        else{
            //是更新
            $.ajax({
                url:"/webapi/student/update",
                method:"put",

                data:data
            }).done(function(){

                loadTable();
                $('#myModal').modal('hide')

            })

        }
    }
    /*
    function deleteStudent(){
        var dedata={
            id:$("#id").val(),
            no:$("#no").val(),
            name:$("#name").val(),
            sex:$("#sex").val(),
            age:$("#age").val(),
            score:$("#score").val(),
        };
        $.ajax({
            url:"/webapi/student/delete",
            method:"delete",
            data: dedata
        }).done(function(){
            loadTable();
            $('#myModal').modal('hide')
        })
    }
    */
    function deleteStudent(id){
        if(confirm("你是否真的要删除吗？别后悔哦！")){

            $.ajax({
                url:"/webapi/student/delete/"+id,
                method:"delete"

            }).done(function (){
                loadTable();
            });


        }
    }
    /*
    function updateStudent(){
        var updata={
            id:$("#id").val(),
            no:$("#no").val(),
            name:$("#name").val(),
            sex:$("#sex").val(),
            age:$("#age").val(),
            score:$("#score").val(),
        };
        $.ajax({
            url:"/webapi/student/update",
            method:"put",

            data: updata
        }).done(function(){

            loadTable();
            $('#myModal').modal('hide')

        })
    }
    */
    function editStudent(id){
        $('#myModal').modal('show');
        $.ajax({
            url:'/webapi/student/get/'+id
        }).done(function(rs){

            $("#id").val(rs.id);
            $("#no").val(rs.no);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#score").val(rs.score);/*
            var html="<button type='button' class='btn btn-primary' onclick='updateStudent();'>保存</button>"
                +"<button type='button' class='btn btn-primary' onClick='deleteStudent();'>删除</button>"
            $("#buttonstudent").html(html);*/
        })
    }
    /*
    function setButton(){
        $.ajax({

        }).done(function(rs){
            var html="<button type='button' class='btn btn-success' onclick='addStudent();'>保存</button>"
            $("#buttonstudent").html(html);
        })
    }*/
    function loadTable(){
        $.ajax({
            url:'/webapi/student/list'
        }).done(function(rs){
            var len=rs.length;
            var html="";
            for (var i = 0;i < len;i++){
                var item=rs[i];
                html+="<tr>"
                    +"<td>"+item.id+"</td>"
                    +"<td>"+item.no+"</td>"
                    +"<td>"+item.name+"</td>"
                    +"<td>"+item.sex+"</td>"
                    +"<td>"+item.age+"</td>"
                    +"<td>"+item.score+"</td>"

                    +"<td> <a href='#' onclick='editStudent("+item.id+");'>编辑</a>    <a href='#' onclick='deleteStudent("+item.id+");'>删除</a></td>"

                    +"</tr>";
            }

            $("#studentTb").html(html);
        })

    }
    $(function(){
        loadTable();
    })


    function preAdd(){
        $('#id').val(0);//提示新增
    }

</script>
</body>
</html>